import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useRouter } from 'expo-router';
import React from 'react';
import { StyleSheet, Button, Image, ScrollView, View, ImageBackground, TouchableOpacity, Text } from 'react-native';
import { gifts } from '@/mock/Carousel';

export default function Gift() {
  const router = useRouter();
  const [gift, setGift] = React.useState([]);

  React.useEffect(() => {
    setGift(gifts.data);
  }, []);

  return (
    <View style={{ backgroundColor: '#FFC0CB', flex: 1 }}>
      <ScrollView contentContainerStyle={{ alignItems: 'center' }}>
        <Image source={require('./static/1.jpg')} style={{ width: '100%', height: 200 }} />
        <ImageBackground
          source={require('./static/2.jpg')}
          style={styles.imageBackground}
          imageStyle={{ borderRadius: 25, width: '115%', height: '189%' }}
          resizeMode="cover"
        >
          <ThemedText style={{ fontSize: 20, color: '#fff', textAlign: 'center' }}>新客专享</ThemedText>
        </ImageBackground>
        {/* 新客福利 */}
        <ThemedView style={{ marginLeft: 10, marginRight: 10, backgroundColor: '#FFC0CB' }}>
          <ThemedView style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', width: '100%', marginTop: 10, backgroundColor: '#FFC0CB' }}>
            {gift.map((item, index) => (
              <TouchableOpacity key={index} onPress={() => router.push(`/info?item=${encodeURIComponent(JSON.stringify(item))}`)} style={styles.touchableOpacity}>
                <ThemedView key={item.id} style={{ backgroundColor: '#FFC0CB' }}>
                  <Image source={{ uri: item.src }} style={{ width: '100%', aspectRatio: 0.8, resizeMode: 'cover', marginTop: 10 }} />
                  <Text numberOfLines={1} ellipsizeMode="tail" style={{ fontSize: 16, color: 'black' }}>{item.title}</Text>
                  <Text numberOfLines={1} ellipsizeMode="tail" style={{ fontSize: 11, color: 'grey' }}>{item.desc}</Text>
                  <ThemedView style={styles.priceContainer}>
                    <ThemedText style={{ fontSize: 10, color: 'red', textAlign: 'left' }}>￥{item.price}【会员价】
                      <ThemedText style={{ color: 'gray', textDecorationLine: 'line-through', fontSize: 12 }}>￥{item.sale}</ThemedText>
                    </ThemedText>
                    <ThemedText style={{ marginLeft: 10, fontSize: 11, color: 'white', textAlign: 'right',padding: 10, backgroundColor: 'red', borderRadius: 30, lineHeight: 13 }}>
                      买到就赚
                    </ThemedText>
                  </ThemedView>
                </ThemedView>
              </TouchableOpacity>
            ))}
          </ThemedView>
        </ThemedView>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  imageBackground: {
    width: '40%',
    marginTop: 10,
    padding: 10,
    backgroundColor: 'white',
    borderRadius: 25,
    shadowColor: '#464242',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 5,
    justifyContent: 'center',
    alignItems: 'center'
  },
  touchableOpacity: {
    width: '45%',
    alignItems: 'left',
    marginHorizontal: 5,
    marginBottom: 10,
    backgroundColor: '#FFC0CB',
    borderRadius: 10,
    boxShawd: 5
  },
  priceContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignContent: 'left',
    alignItems: 'center',
    width: '90%',
    marginTop: 5,
    backgroundColor: '#FFC0CB'
  }
});